import 'dart:typed_data';

import 'package:flutter/services.dart';
import 'package:flutter_elf/config/component_index.dart';
import 'package:flutter_elf/widgets/appbar_creator.dart';
import 'dart:ui' as ui;

class SlideVerifyPage extends BaseWidget{
  @override
  BaseWidgetState<BaseWidget> getState() {
    // TODO: implement getState
    return SlideVerifyPageState();
  }
}

class SlideVerifyPageState extends BaseWidgetState{

  double percentage = 0.0;
  double initial = 0.0;
  double desValue = 100;


  Future<ui.Image> loadImage(String asset)async{
    ByteData data = await rootBundle.load(asset);
    ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(),targetHeight: 60,targetWidth: 60);
    ui.FrameInfo info = await codec.getNextFrame();
    return info.image;
  }

  @override
  Widget buildView(BuildContext context) {
    // TODO: implement buildView
    return GestureDetector(
    onHorizontalDragUpdate: (DragUpdateDetails details){
        setState(() {
          value = details.localPosition.dx;

        });
        globalPrint('滑动的位置是=====>' + details.localPosition.toString());
    },onHorizontalDragEnd: (DragEndDetails details){
        if((value - desValue).abs() < 20){
          showToast('到达目标了');
        }else{
          showToast('还没有到大');
        }
        globalPrint('结束的位置====>' + details.primaryVelocity.toString());
        globalPrint('结束的位置====>' + details.toString());
    },
      child: Container(
        color: Colors.cyanAccent,
        child: FutureBuilder<ui.Image>(
          future: loadImage(R.staticImageSunPng),
          builder: (context,snap){
            return Column(
              children: <Widget>[
                CustomPaint(
                  painter: Indicator(
                      value:100,height:100,
                  ),size: Size(500,200),
                ),
                CustomPaint(
                  painter: Indicator(
                      value:value,height:200,
                  ),size: Size(500,200),
                )
              ],
            );
          }
        ),
      )
    );
  }
  double value = 0;
  @override
  PreferredSizeWidget initAppbar() {
    // TODO: implement initAppbar
    return AppBarCreator.create(context, '滑动验证');
  }
}

class Indicator extends CustomPainter{
  double value;
  double height;
  double width;

  Indicator({ this.value, this.height});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()..isAntiAlias = true
        ..color = Colors.red;
    Offset offset = Offset(value, height/2);
//    canvas.drawImage(indicator, offset, paint);
    drawIndicator(canvas, paint, offset, px(114), px(60));
    paint.color = Colors.white;
    paint.strokeWidth = 1.5;
    drawLine(canvas,paint,offset);
  }

  drawLine(Canvas canvas,Paint paint,Offset offset){
    canvas.drawLine(Offset(offset.dx - 10,offset.dy + 5), Offset(offset.dx - 10,offset.dy - 5), paint);
    canvas.drawLine(Offset(offset.dx,offset.dy + 5), Offset(offset.dx ,offset.dy - 5), paint);
    canvas.drawLine(Offset(offset.dx + 10,offset.dy + 5), Offset(offset.dx + 10,offset.dy - 5), paint);
  }

  drawIndicator(Canvas canvas,Paint paint,Offset center,double width,double height){
    Rect rect = Rect.fromCenter(width:width,height:height,center: center);
    RRect r = RRect.fromRectXY(rect, 5, 5);
    canvas.drawRRect(r, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return true;
  }

}